<template>
  <div class="scene">
    <div class="block">
      <span v-show="show1" class="span1 word">你打开某支付软件<br/>看见上面有无息贷款功能<br/>你好奇地点了进去</span>
      <span v-show="show1" class="span2 word">上面写着各种各样贷款优惠<br/>立马到账<br/>月内无利息<br/>身份保密等等</span>
      <span v-show="show1" class="span3 word">想到你手上不多的余额<br/>你思考了很久<br/>你的选择是</span>
      <el-button v-show="show2" class="button" v-on:click="A">A 还是算了打个电话给家里吧</el-button>
      <el-button v-show="show2" class="button" v-on:click="B">B 无息贷款冲冲冲</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data : function() {
    return {
      show1: true,
      show2: false,
    }
  },
  mounted() {
    this.load();
  },
  methods: {
    load() {
      setTimeout(() => {this.show1 = false}, 9000)
      setTimeout(() => {this.show2 = true}, 9000)
    },
    A() {
      this.$router.push("/learn/scene1-2")
    },
    B() {
      this.$router.push("/learn/scene1-5")
    },
  }
}
</script>

<style scoped>
.scene{
  width: 100%;
  min-height: 666px;
}

.block{
  width: 1080px;
  height: 607.5px;
  top: 30px;
  position: relative;
  left: 50%;
  transform: translate(-50%, 0%);
  background-color: black;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}

.button {
  height: 60px;
  margin-top: 270px;
  margin-left: 50px;
  font-size: 25px;
  font-weight: bold;
  color: rgba(249, 191, 75, 1);
  background: rgba(53, 78, 102, 1);
}

.word {
  font-size: 50px;
  font-weight: bold;
  color: rgba(249, 191, 75, 0);
  position: absolute;
  width: 1080px;
  left: 50%;
  transform: translate(-50%, 0%);
  animation-duration: 3s;
  animation-name: move1;
}

.span1{
  top: 180px;
}

.span2{
  top: 150px;
  animation-delay: 3s;
}

.span3{
  top: 180px;
  animation-delay: 6s;
}

@keyframes move1 {
  0% {
    color: rgba(249, 191, 75, 0);
  }
  50% {
    color: rgba(249, 191, 75, 1);
  }
  80% {
    color: rgba(249, 191, 75, 1);
  }
  100% {
    color: rgba(249, 191, 75, 0);
  }
}
</style>